<template>
  <div class="email">
    <div class="title">
      <i class="el-icon-arrow-left" @click="$router.back()"></i>

    </div>
    <h3>邮件发送</h3>
    <div class="top" v-if="isAll != '1'">
      <span>邮箱:</span>
      <div class="top-email">
        <input disabled type="text" :value="email"/>
      </div>

    </div>
    <div class="top">
      <span>主题:</span>
      <div class="top-email">
        <input type="text" v-model="subject"/>
      </div>

    </div>
    <TextEditor @update="handleUpdate"/>
    <div style="margin: 20px 0">
      <span>附件</span>
      <el-upload
          :on-success="onSuccess"
          :before-upload="beforeUpload"
          style="width: 400px;"
          :on-change="change"
          class="upload-demo"
          drag
          action="api/file-load/attachments"
          >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">文件大小不超过10mb</div>
      </el-upload>
    </div>


    <el-row style="margin: 20px">
      <el-button type="primary" @click="sendEmail">发送订阅邮件</el-button>
    </el-row>
  </div>
</template>

<script>
import TextEditor from "@/components/TextEditor.vue";

export default {
  components: {
    TextEditor: TextEditor,
  },

  data() {
    return {
      subject: '',
      email: [],
      html: "",
      isAll: '',
      filePath: ''
    };
  },

  methods: {
    onSuccess(res){
      this.filePath = res.data;
      console.log(this.filePath);
    },

    sendEmail() {
      console.log(this.email);
      if (this.isAll != "1" && (this.email == "")) {
        this.$message.warning("未输入邮箱")
        return;
      }
      if (this.html == "<p><br></p>" || this.html == null) {
        this.$message.warning("未输入邮件内容")
        return;
      }
      if(this.subject == "" || this.subject == null) {
        this.$message.warning("未输入邮件主题")
        return;
      }

      this.$http.post('subscribe/send-email', {
        subject: this.subject,
        emails: this.email,
        content: this.html,
        filePath: this.filePath,
        // isAll:this.isAll
      })
          .then(res => {
            // console.log(res)
            if (res.data.code === 200) {
              this.$message.success("发送成功")
              setTimeout(() => {
                this.$router.back()
              }, 1000);
            }
          })
          .catch(err => {
            console.error(err);
          })

    },
    beforeUpload(file){
     if(file.size > 1024 * 1024 * 10){
       return false;
     }
    },
    change(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.warning("文件大于10M")
      }
    },

    handleUpdate(html) {
      this.html = html;

      // console.log(val)
    },
  },

  mounted() {
    // console.log(this.$route.params);
    this.email = this.$route.params.email
    this.isAll = this.$route.params.isAll

  },
};
</script>

<style scoped>
.email {
  margin: 30px;
  padding-bottom: 100px;
}

h3 {
  text-align: center;
  margin: 10px;
}

.top {
  width: 100%;
  margin-bottom: 15px;
}

.top span {
  text-align: left;
  margin-bottom: 5px;
  display: block;
}

.top-email {
  border: 1px solid rgb(204, 204, 204);
  width: 100%;
}

.top input {
  border: none;
  width: 98%;
  height: 30px;
  outline: none;
  margin-left: 10px;
}

.title {
  font-size: 24px;
  text-align: left;
  margin: 10px 10px;
}
</style>